<template>
    <div class="details">
        <header-navbar/>
        <div class="content-wrapper">
            <div class="left-side">
                <div class="details-header">
                    <p class="detail-title">{{this.$store.state.value.title}}</p>
                    <p class="detail-desc">{{this.$store.state.value.desc}}</p>
                    <p class="detail-create-at">{{this.$store.state.value.create_time}}</p>
                </div>
                <div class="details-content">
                    <p v-html="this.$store.state.value.content"></p>
                </div>
            </div>
            <div class="right-side">
                <div class="author-wrapper">
                    <div class="avatar">
                        <img src="@/assets/styles/images/avatar2.jpg" alt="">
                    </div>
                    <p class="nickname"> 狗剩先生 </p>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import HeaderNav from '@/components/HeaderNavbar'

    export default {
        name: "NewDetails",
        components: {
            HeaderNavbar: HeaderNav
        },
        data() {
            return {
            }
        }
    }
</script>

<style lang="stylus" scoped>
    @import '~@/assets/styles/css/variable.styl'
    .content-wrapper
        display: flex
        padding: $commonPadding
        margin-top: 20px;
        .left-side
            flex: 4
            .details-header, .details-content
                border: 1px solid #ececec;
                font-size: 14px;
                box-shadow: 0 0 10px 0 #f5f5f5;
            .details-header
                padding: 0 15px;
                .detail-title
                    font-size:20px;
                    color: #333;
                    font-weight: bolder
                .detail-desc, .detail-create-at
                    color: #666;
                    font-size:14px;
                    font-weight:300;
            .details-content
                margin-top: 10px;
                padding: 10px 20px;
                font-family: fantasy;
                letter-spacing: 1px;
                line-height: 25px;
        .right-side
            flex: 1
            padding-bottom: 20px;
            margin-left: 20px;
            .author-wrapper
                padding: 40px 0 60px;
                background: #fff;
                box-shadow: 0 0 10px 5px #eaeaea;
                .avatar
                    width: 30%;
                    padding: 0 35%;
                    img
                        width: 100%;
                        border-radius: 50%;
                .nickname
                    text-align: center;
                    margin: 10px 0;
                    padding: 0;

</style>